<template>
  <div>
    <Tips></Tips>
    <van-checkbox-group v-model="result" :disabled="isEditing">
      <van-checkbox :name="item.id" v-for="item in cartdatalist"     :key="item.id" @click="checkChange(item)">
        <van-swipe-cell>
          <van-card
            :num="item.number"
            :price="item.retail_price"
            :title="item.goods_name"
            :thumb="item.list_pic_url"
          />
          <!-- 删除按钮 -->
          <template #right>
            <van-button square type="danger" text="删除" @click="DelGood(item.product_id)"/>
          </template>
          <!-- 步进器 -->
          <van-stepper v-model="item.number" v-show="isEditing"
          @change="stepperchange(item)"/>
        </van-swipe-cell>
      </van-checkbox>
    </van-checkbox-group>
    <van-submit-bar
        :price="cartTotal.goodsAmount*100"
        button-text="提交订单"
        @submit="onSubmit">
        <van-checkbox v-model="checkedAll" :disabled="isEditing">全选</van-checkbox>
        <template #tip>
          累计共{{cartTotal.goodsCount}}件商品,可点击<van-button round :type="isEditing?'danger':'primary'" @click="editBtn">{{isEditing?'完成编辑':'编辑'}}</van-button>按键进行商品修改
        </template>
    </van-submit-bar>
  </div>
</template>

<script>
import Tips from '@/components/Tips.vue'
import { CartDataList, ChangeChecked, StepperChangeData, DeleteGood } from '@/request/api.js'
export default {
  data() {
    return {
      // 和上面的name对应里，里面有就选中
      result: [],
      // 全选状态
      // checkedAll: true,
      // 购物车信息列表
      cartdatalist: [],
      // 下面总计信息
      cartTotal: [],
      // 编辑状态
      isEditing: false

    }
  },
  created() {
    CartDataList().then(res => {
      // console.log('购物车请求数据信息：')
      // console.log(res)
      this.totalfunction(res.data)
    })
  },
  computed: {
    // 单选按钮决定全选按钮
    checkedAll: {
      get() {
        return this.result.length === this.cartdatalist.length
      },
      set(val) { // 即将要修改的值
        // 处理id数组
        const idsarrs = []
        this.cartdatalist.map(item => {
          idsarrs.push(item.product_id)
          ChangeChecked({
            isChecked: val ? 1 : 0,
            productIds: idsarrs.join()
          }).then(res => {
            // console.log('改变复选框返回给后台的数据：')
            // console.log(res)
            this.totalfunction(res.data)
          })
        })
      }
    }
  },
  methods: {
    // 删除按钮
    DelGood(gid) {
      DeleteGood(
        { productIds: gid.toString() }
      ).then(res => {
        if (res.errno === 0) {
          // console.log('删除商品之后的信息')
          // console.log(res.data)
          // 在发给后台
          this.totalfunction(res.data)
        }
      })
    },
    // 编辑按钮
    editBtn() {
      this.isEditing = !this.isEditing
    },
    // 定义传给后台数据的方法
    totalfunction(data) {
      const { cartList, cartTotal } = data
      this.cartdatalist = cartList
      this.cartTotal = cartTotal
      this.result = []
      this.cartdatalist.map(item => {
        if (item.checked === 1) {
          this.result.push(item.id)
        } else {

        }
      })
    },
    onSubmit() {},
    onClickEditAddress() {},
    // 改变复选框返回给后台，后端接受到一个返回给一个完整的页面数据，在渲染
    checkChange(item) {
      if (this.isEditing) return
      ChangeChecked({
        isChecked: item.checked === 0 ? 1 : 0,
        productIds: item.product_id
      }).then(res => {
        // console.log('改变复选框返回给后台的数据：')
        // console.log(res)
        this.totalfunction(res.data)
      })
    },
    // 步进器请求数据
    stepperchange(item) {
      // console.log(val就是上面你的val)// 这个val就是步进器的值
      StepperChangeData({
        goodsId: item.goods_id,
        id: item.id,
        number: item.number,
        productId: item.product_id
      }).then(
        res => {
          if (res.errno === 0) {
            // console.log('步进器改变的修改的值')
            // console.log(res.data)
            this.totalfunction(res.data)
          }
        }
      )
    }
  },
  components: {
    Tips
  }
}
</script>

<style lang="less" scoped>
  /deep/.van-checkbox__label{
    width: 100%;
  }
  .van-checkbox{
        border-bottom: 1px solid #ccc;
        position: relative;

  }
  .van-card{
    padding: .125rem .1rem;
    height: 1.25rem;
  }
  .van-checkbox-group{
    background-color: #fff;
    padding-bottom: 1.625rem;
  }
  .van-submit-bar{
    bottom: .5125rem;
  }
  .van-stepper{
    position: absolute;
    // text-align: right;
    // bottom: .1875rem;
    bottom: 0;
    right: 0;
  }
  .van-button--danger{
    height: 100%;
  }
</style>
